<template>
    <view class="uc-wrap uc-product-detail">
        <view class="swiper-box">
            <swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="3000" :duration="500" class="banner" :current="current" @change="swiperChange" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#0a95db" style="height: 750rpx;">
                <swiper-item v-for="(item,index) in CategoryInfo.itemTopPicList" :key="index">
                    <view class="swiper-item">
                        <image :src="item" mode="aspectFill"></image>
                    </view>
                </swiper-item>
            </swiper>
            <view class="number">
                {{current+1}}/{{CategoryInfo.itemTopPicList.length}}
            </view>
        </view>
        <view class="panel">
            <view class="name">{{CategoryInfo.itemName}}</view>
            <view class="price">{{CategoryInfo.itemPrice}}</view>
        </view>
        <view class="detail">
            <view class="title">详情</view>
            <view class="box">
                <image v-for="(item,index) in CategoryInfo.itemDetailImg.indexOf(',') !=-1?CategoryInfo.itemDetailImg.split(','):[]" src="https://my.bziyun.com/20250619/product-detail-img_1750323532511.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="fixed-operate">
       <!--     <navigator class="btn" url="" hover-class="none">
                
            </navigator> -->
            <button class="uc-btn " hover-class="none"><image src="@/static/images/icon-shop.png" mode="widthFix" class="uc-icon40"></image>商城</button>
        </view>
        <view class="g-btnFixedShare">
            <!-- <image src="@/static/images/product-detail-icon-1.png" mode="widthFix"></image> -->
        </view>
    </view>
    <!-- 分享 -->
    <view class="uc-alert uc-alert-Share" v-if="showShare" @touchmove.stop.prevent="doNothing">
        <view class="over-close" @click="showShare=false"></view>
        <view class="box-bottom">
            <view class="part">
                <view class="btn">
                    <image src="https://my.bziyun.com/20250619/alert-Share-icon-1_1750323144123.png" mode="widthFix" class="uc-icon120"></image>微信好友
                </view>
                <view class="btn">
                    <image src="https://my.bziyun.com/20250619/alert-Share-icon-2_1750323223360.png" mode="widthFix" class="uc-icon120"></image>保存海报
                </view>
            </view>
            <view class="operate">
                <button class="uc-btn" hover-class="none" @click="showShare=false">取消</button>
            </view>
        </view>
    </view>
    <view class="uc-alert uc-alert-ShareBannerProductDetail" v-if="showShareBannerProductDetail" @touchmove.stop.prevent="doNothing">
        <view class="over-close" @click="showShareBannerProductDetail=false"></view>
        <view class="box-bottom">
            <view class="title">
                保存图片
                <view class="btn-close" @click="showShareBannerProductDetail=false" hover-class="none"><text class="uc-font uc-close"></text></view>
            </view>
            <view class="img"><image src="https://my.bziyun.com/20250619/alert-ShareBannerProductDetail-img_1750323055253.png" mode="aspectFill"></image></view>
            <view class="operate">
                <button class="uc-btn red" hover-class="none">保存图片</button>
                <view class="tips">保存图片到手机后，将图片分享给好友</view>
            </view>
        </view>
    </view>
</template>
<script setup>
    import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { useMainStore } from '@/store/index.js'
	const mainStore= useMainStore();
    const banners = ref([
        'https://my.bziyun.com/20250619/product-detail-banner_1750323472553.png',
        'https://my.bziyun.com/20250619/product-detail-banner_1750323472553.png',
        'https://my.bziyun.com/20250619/product-detail-banner_1750323472553.png',
    ])
	const CategoryInfo = ref(null)
	onLoad((options) => {
	  if (options.id) {
	    // console.log('页面参数 id:', options.id)
		uni.setNavigationBarTitle({
		    title: options.title
		});
		getInfo(options.id)
	  }
	})
	const getInfo = (id)=>{
		uni.request({
			url: `https://muyin-pc.51wephone.cn/app-api/item/detail/${id}`, 
			method: 'GET', 
			data: { 
			},
			header:{
				"TOKEN":mainStore.userInfo.token ||"9228b93fc98d4c3f9a25303aa2468bb1",
			},
			success: (res) => {
				console.log('请求成功:', res.data);
				CategoryInfo.value = res.data.data
			},
			fail: (err) => {
				console.error('请求失败:', err);
			}
		});
	}
	
	
	
	
    const current = ref(0)
    const swiperChange = e => {
        current.value = e.detail.current
    }
	
	
	
	
	
	
    const btnSwiper = e => {
        if (e == 'prev') {
            current.value--
            if (current.value < 0) {
                current.value = this.banners.length - 1
            }
        } else {
            current.value++
            if (current.value > this.banners.length - 1) {
                current.value = 0
            }
        }
    }
    const showShare = ref(false)
    const showShareBannerProductDetail = ref(false)
    const doNothing = () => {}
</script>